<template>
  <div class="bigbox">
    <!-- 返回上一级 -->
    <Navbar :title="title" :xiaoming="reserve" class="hha" />
    <div class="kong"></div>
    <!-- 商品管理 -->
    <el-row>
      <el-col :span="6"
        ><div class="grid-content bg-purple"></div>
        <div class="topbox">
          <!-- 商品名称查询 -->
          <div class="text">商品名称</div>
          <el-input v-model="shangpinguanli" clearable></el-input>
        </div>
      </el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple-light"></div>
        <div class="topbox">
          <!-- 商品编号查询 -->
          <div class="text">商品编号</div>
          <el-input v-model="shangpinbiaohao" clearable></el-input></div
      ></el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple"></div>
        <div class="topbox">
          <!-- 上架状态查询 -->
          <div class="text">上架状态</div>
          <el-input v-model="shangjiazhuangtai" clearable></el-input></div
      ></el-col>
      <el-col :span="0"
        ><div class="grid-content bg-purple"></div>
        <div class="topbox">
          <!-- 占位空白 -->
          <div class="kong"></div></div
      ></el-col>
      <!-- 商品管理按钮right -->
      <el-col :span="6"
        ><div class="grid-content bg-purple-light"></div>
        <!-- 查询按钮 -->
        <el-button type="primary" @click="chaxun">查询</el-button>
        <!-- 重置按钮 -->
        <el-button type="primary" @click="chongzhi">重置</el-button>
        <!-- 新增按钮 -->
        <el-button type="primary" class="color" @click="drawer = true"
          >新增</el-button
        >
      </el-col>
    </el-row>
    <!-- 添加商品 -->
    <el-drawer
      title="添加商品"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <!-- 添加表格 -->
      <div>
        <el-row>
          <el-col :span="5"
            ><div class="grid-content bg-purple"></div>
            <!-- 点击上传 -->
            <el-upload
              class="upload-demo"
              action=" http://zca6hp.natappfree.cc/goods/upload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="cuccessok"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
            >
              <el-button size="small" type="primary">点击上传图片</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件,且不超过500kb
              </div>
            </el-upload>
          </el-col>
          <el-col :span="4"
            ><div class="grid-content bg-purple-light"></div>
            <!-- 新增商品名称 -->
            <el-input
              v-model="shangpinmingcheng"
              placeholder="请输入商品名称"
            ></el-input>
          </el-col>
          <el-col :span="4"
            ><div class="grid-content bg-purple"></div>
            <!-- 新增商品市场价格 -->
            <el-input
              v-model="shichangjiage"
              placeholder="请输入市场价格"
            ></el-input>
          </el-col>
          <el-col :span="4"
            ><div class="grid-content bg-purple-light"></div>
            <!-- 新增商品优惠价格 -->
            <el-input
              v-model="youhuijiage"
              placeholder="请输入优惠价格"
            ></el-input
          ></el-col>
          <el-col :span="3"
            ><div class="grid-content bg-purple-light">
              <el-input
                v-model="xinzengshangpinid"
                placeholder="请输入id"
              ></el-input>
            </div>
          </el-col>
          <el-col :span="4"
            ><div class="grid-content bg-purple-light"></div>
            <!-- 添加商品按钮 -->
            <el-button type="primary" @click="open">添加商品</el-button>
          </el-col>
        </el-row>
      </div>
    </el-drawer>
    <div class="kong"></div>
    <!-- 商品列表 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @row-click="faqingqiu"
    >
      <el-table-column prop="gid" label="序号"> </el-table-column>
      <el-table-column prop="proid" label="商品编号" width="auto">
      </el-table-column>
      <el-table-column label="商品主图">
        <template slot-scope="scope">
          <img :src="scope.row.imgurl" />
        </template>
      </el-table-column>
      <el-table-column prop="proname" label="商品名称"> </el-table-column>
      <el-table-column prop="price" label="市场价格"> </el-table-column>
      <el-table-column prop="favprice" label="优惠价格"> </el-table-column>
      <el-table-column prop="bool" label="上架状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.tool"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >删除</el-button
          >
          <!-- <el-button type="text" size="small" @click="xiugai(scope.row)"
            >修改</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      layout="prev, pager, next"
      :total="this.zongshuju"
      @current-change="dangqian"
    >
    </el-pagination>
  </div>
</template>

<script>
import {
  shop,
  update,
  goodsdelete,
  goodssearchAll,
  goodssearch,
  goodsblursearch,
  remove,
} from "../../api/li-j/axios";
import Navbar from "../../components/NavBar.vue";
export default {
  data() {
    return {
      // 表格数据
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          imgurl:
            "https://img1.360buyimg.com/da/jfs/t1/16273/9/11655/153805/5c90a4f3E683206d9/eef283b0ed619fe4.gif?v=0.2261617343758313",
        },
      ],
      //抽屉显示真假值
      drawer: false,
      direction: "ttb",
      //商品总数据的num
      zongshuju: 30,
      // 添加的商品名称
      shangpinmingcheng: "",
      //添加的市场价格
      shichangjiage: "",
      //添加的优惠价格
      youhuijiage: "",
      xinzengshangpinid: "",
      // 商品管理的input
      shangpinguanli: "",
      // 商品编号input
      shangpinbiaohao: "",
      // 上架状态input
      shangjiazhuangtai: "",
      //上传imgurl
      fileList: "",
      //表格渲染的数据
      tablenum: "1",
      title: "商品管理",
      reserve: "返回上一页",
    };
  },
  components: {
    Navbar,
  },
  methods: {
    // 商品列表的函数
    shangpinleibiao() {
      shop(this.tablenum, 4).then((ok) => {
        console.log(ok.data.records);
        // console.log(ok.data.data.records);
        this.tableData = ok.data.records;
      });
    },
    //操作删除
    handleClick(row) {
      console.log(row.gid);
      goodsdelete(row.gid).then((ok) => {
        console.log(ok);
        this.shangpinleibiao();
      });
    },
    //操作修改
    faqingqiu(row) {
      update(
        row.favprice,
        row.gid,
        row.imgurl,
        row.price,
        row.proid,
        row.proname,
        row.tool
      ).then((ok) => {
        console.log(ok);
      });
      console.log(row);
    },
    //抽屉
    handleClose(done) {
      console.log(done);
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //返回上一级
    fun() {
      console.log(111);

      this.$router.go(-1);
    },
    //添加完成消息提示框
    open() {
      this.$confirm("添加数据是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          update(
            this.youhuijiage / 1,
            0,
            this.fileList,
            this.shichangjiage,
            "STY" + this.xinzengshangpinid,
            this.shangpinmingcheng,
            true
          ).then((ok) => {
            console.log(ok);
            (this.youhuijiage = ""),
              // (this.fileList = ""),
              (this.shichangjiage = ""),
              (this.xinzengshangpinid = ""),
              (this.shangpinmingcheng = "");
            this.shangpinleibiao();
          });
          this.$message({
            type: "success",
            message: "添加成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 查询按钮
    addchaxun() {
      // console.log(
      //   "商品编号input",
      //   this.shangpinbiaohao,
      //   "上架状态input",
      //   this.shangjiazhuangtai
      // );
      // goodssearchAll(this.tablenum, { proid: this.shangpinbiaohao }, 4).then(
      //   (ok) => {
      //     console.log(ok);
      //   }
      // );
      // 精准查询
      // goodssearch(
      //   this.tablenum,
      //   this.shangpinguanli,
      //   // { tool: this.shangjiazhuangtai },
      //   4
      // ).then((ok) => {
      //   console.log(ok);
      // });
      // 发请求后input清除
      // (this.shangpinguanli = ""),
      //   (this.shangpinbiaohao = ""),
      //   (this.shangjiazhuangtai = "");
      // loading消息提示框
    },
    //重置
    chongzhi() {
      (this.shangpinguanli = ""),
        (this.shangpinbiaohao = ""),
        (this.shangjiazhuangtai = "");
      remove().then((ok) => {
        conslog.log(ok);
      });
      //  loading消息框
      this.shangpinleibiao();
      this.$notify({
        message: "你已成功重置",
        type: "success",
      });
    },
    // 图片移除钩子函数
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    //文件上传成功时的钩子
    cuccessok(response, file, fileList) {
      // console.log(1111);
      console.log(file.response.data);
      this.fileList = file.response.data;
      // loading消息提示框
      const h = this.$createElement;
      this.$notify({
        message: h("i", { style: "color: teal" }, "商品图片上传成功"),
      });
    },
    //点击文件列表中已上传的文件时的钩子
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    // 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //分页的钩子函数
    dangqian(num) {
      console.log(num);
      this.tablenum = num;
      // console.log(this.tablenum)
      this.shangpinleibiao();
    },
    //失去焦点查询
    chaxun() {
      const h = this.$createElement;
      this.$notify({
        message: h("i", { style: "color: teal" }, "查询成功"),
      });
      goodsblursearch(1, this.shangpinguanli, 4).then((ok) => {
        console.log(ok.data.records);
        // console.log(ok.data.data.records);
        this.tableData = ok.data.records;
      });
    },
  },
  mounted() {
    this.shangpinleibiao();
  },
};
</script>

<style scoped>
.hha {
  background: #eee;
}
.tianjiabiaoge {
  width: 100%;
  height: 300px;
  background: orange;
}
.bigbox {
  width: 100%;
  height: 100%;
  position: relative;
  /* 动画 */
}

.fanhui {
  position: absolute;
  right: 30px;
  top: 10px;
}
img {
  width: 80%;
  height: 100%;
}
.kong {
  height: 50px;
  width: 1px;
}
.color {
  background: orange;
  border: 1px solid orange;
}
.topbox {
  display: flex;
}
.toptopbox {
  display: flex;
}
.text {
  width: 200px;
  font-size: 8px;
  font-weight: 400;
  text-align: center;
  line-height: 30px;
  margin: 0.3rem;
}
/* .input {
  width: 0.1rem;
  border: 1px solid black;
} */
</style>